<template>
  <div>

    <div class="img_top">
      <div class="lift">退款申请处理</div>
      <div class="right">

        <el-button icon="el-icon-refresh">刷新</el-button>
      </div>
    </div>
    <div class="box">

      <div class="top">
        <div class="lift"><el-button icon="el-icon-search">筛选查询</el-button></div>
        <div class="right">
          <el-button @click="resetForm('searchForm')">重置</el-button>
          <el-button @click="onSubmit">搜索</el-button>
        </div>
      </div>

      <el-form :inline="true" ref="searchForm" :model="search" class="demo-form-inline">

        <el-form-item label="退款单号：" prop="orderid">
          <el-input v-model="search.orderid" placeholder="退款单号"></el-input>
        </el-form-item>
        <el-form-item label="申请时间：" >
          <el-col :span="11" prop="createAt">
            <el-time-picker placeholder="选择开始时间" v-model="search.createAt" style="width: 90%"></el-time-picker>
            -
          </el-col>

          <el-col :span="11" prop="date">
            <el-time-picker placeholder="选择结束时间" v-model="search.date" style="width: 100%"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="处理时间：" prop="OrderNum">
          <el-col :span="11">
            <el-time-picker placeholder="选择开始时间" v-model="search.create_time" style="width: 90%"></el-time-picker>
            -
          </el-col>

          <el-col :span="11">
            <el-time-picker placeholder="选择结束时间" v-model="search.over_time" style="width: 100%"></el-time-picker>
          </el-col>
        </el-form-item>
        <br>
        <el-form-item label="用户账号" prop="id">
          <el-input v-model="search.id" placeholder="用户账号"></el-input>
        </el-form-item>

        <el-form-item v-model="drawBackList" label="退款金额：" prop="OrderNum">
          <el-select v-model="value">
            <el-option label="大于" value="big"></el-option>
            <el-option label="等于" value="eq"></el-option>
            <el-option label="小于" value="small"></el-option>
            <el-option label="大于等于" value="bigeq"></el-option>
            <el-option label="小于等于" value="smalleq"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="OrderNum">
          <el-input v-model="search.ip"></el-input>
        </el-form-item>
        <el-form-item label="退款状态：" prop="name">
         
          <el-select v-model="name">
            <el-option label="全部" value="1"></el-option>
            <el-option label="待处理" value="2"></el-option>
            <el-option label="已退款" value="3"></el-option>
            <el-option label="已拒绝" value="4"></el-option>

          </el-select>
        </el-form-item>

      </el-form>
      <el-table ref="multipleTable" :data="drawBackList" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>

        <el-table-column prop="orderid" label="退款单号" width="120">
        </el-table-column>
        <el-table-column label="申请时间" width="120">
          <template slot-scope="scope">{{ scope.row.createAt }}</template>
        </el-table-column>
        <el-table-column prop="id" label="用户账号" width="120">
        </el-table-column>
        <el-table-column prop="address" label="退款金额" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="退款状态" width="120">
        </el-table-column>
        <el-table-column prop="date" label="处理时间" width="120">
        </el-table-column>
        <el-table-column  label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="$router.push('/admin/order/drawbackDetail/' + scope.row.orderid)" type="text"
              size="small">
              查看详情{{ scope.orderid }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagination.current" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    </div>


  </div>
</template>

<script>
import { GetOrderDrawback, GetDrawbackStatic } from '@/api/order'
export default {
  data() {
    return {
      value: 'eq',
      name: '全部',
      drawBackList: [],
      drawBackStaticList: [],
      search: {
        orderid: "",
        id:'',
        createAt: "",
        date:"",
        shoppingAdd: '',
        shopid: "",
       name:"",

     

        current: 1,
        size: 10,
        order: "desc"
      },
      pagination: {},
    }
  }, created() {
    this.getDrawBackList();

    GetDrawbackStatic()
      .then(tes => {
      //  console.log(tes, tes.data.list, 'tes');
        this.drawBackStaticList = tes.data.list
      })
  },
  methods: {
    onSubmit() {
    //  console.log('submit!');
      this.getDrawBackList()
    },
    resetForm(formName) {
     // console.log(formName);
      this.$refs[formName].resetFields();
      this.getDrawBackList();
    },
    getDrawBackList() {
      GetOrderDrawback(this.search)
        .then(res => {
       //   console.log(res);
          this.drawBackList = res.data.data;
          this.pagination = res.data.pagination;
          this.pagination.size = this.pagination.size * 1;
          this.pagination.current = this.pagination.current * 1;
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.size = val;
      this.getDrawBackList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.current = val;
      this.getDrawBackList();
    },
  }
}
</script>

<style lang="scss" scoped>
.img_top {
  background-color: rgba(243, 243, 243);
  margin: -16px;
  padding-top: -16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lift {
    background: url("../../../assets/left.png") no-repeat;
    padding-left: 20px;
  }

  .right {}
}

.box {

  margin: -16px 30px 0 -16px;
  background-color: rgb(249, 249, 249);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  background-color: white;
  height: 62px;
  line-height: 62px;

  .lift {}

  .right {}
}
</style>